<template>
  <div class="login">
    <div class="login-center">
      <div class="login-center-left">
        <img src="../assets/image/login-work.png"/>
      </div>
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
        <h3 class="title">{{ projectInfo.name }}</h3>
        <el-form-item prop="username">
          <el-input v-model="loginForm.userName" type="text" auto-complete="off" @input="userNameChange"
                    placeholder="账号">
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              v-model="loginForm.password"
              type="password"
              auto-complete="off"
              placeholder="密码"
              show-password
              @keyup.enter.native="handleLogin"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input
              v-model="loginForm.code"
              auto-complete="off"
              placeholder="验证码"
              style="width: 63%"
              @keyup.enter.native="handleLogin"
          >
          </el-input>
          <div class="login-code">
            <img :src="codeUrl" alt="" @click="getCode"/>
          </div>
        </el-form-item>
        <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">记住密码</el-checkbox>
        <el-form-item style="width:100%;">
          <el-button
              round
              :loading="loading"
              size="medium"
              type="primary"
              style="width:100%;height: 40px;border-radius: 40px"
              @click.native.prevent="handleLogin"
          >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--  底部  -->
    <div class="el-login-footer">
      <span>Copyright © {{ `${projectInfo.copyrightYear}-${new Date().getFullYear()}` }} {{
          projectInfo.copyrightCompany
        }} All Rights Reserved.</span>
      <div class="beian">
        <a target="_blank" href="https://beian.miit.gov.cn" v-html="projectInfo.icp||'蒙ICP备xxxxxxxx号'"></a>
        <div>
          <img src="@/assets/image/备案图标.png" alt=""/>
          <a href="https://beian.mps.gov.cn/#/query/webSearch?code=" rel="noreferrer" target="_blank">呼市备案xxxxx</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Watch} from 'vue-property-decorator';
import {Action, Getter} from 'vuex-class';
import {getKaptchaImage} from '@/api/common';
import storeUtils from "@/utils/storeUtils";

interface LoginForm {
  userName?: string;
  password?: string;
  rememberMe?: boolean;
  code?: string;
  key?: string;
}

@Component
export default class Login extends Vue {
  private REMEMBER_ME_USER_PASSWORD = "rememberMeUser"
  codeUrl = '';
  @Getter('projectInfo') private projectInfo: any;


  loginForm: LoginForm = {
    userName: 'admin',
    password: '123456',
    rememberMe: false,
    code: '',
    key: ''
  };

  rememberMeUser: {
    userName: string;
    password: string;
  } = {
    userName: '',
    password: ''
  }
  private redirect: any;
  private query: any;
  loginRules = {
    userName: [
      {required: true, trigger: 'blur', message: '用户名不能为空'}
    ],
    password: [
      {required: true, trigger: 'blur', message: '密码不能为空'}
    ],
    code: [{required: true, trigger: 'change', message: '验证码不能为空'}]
  };
  private loading = false;

  @Action('Login') private Login!: (loginForm: any) => any;

  userNameChange(): void {
    this.loginForm.password = ''
  }

  handleLogin(): void {
    (this.$refs.loginForm as any).validate((valid: boolean) => {
      if (valid) {
        this.loading = true;
        let user: LoginForm = {}
        Object.assign(user, this.loginForm)
        if (user.password === this.REMEMBER_ME_USER_PASSWORD) {
          user.password = this.rememberMeUser.password;
        }


        this.Login(user).then(() => {

          if (this.loginForm.rememberMe) {
            // 如果点击了记住密码  则保存用户密码
            storeUtils.setStorageL(storeUtils.CONST.rememberMe, {
              password: user.password,
              userName: this.loginForm.userName
            })
          } else {
            storeUtils.removeStorageL(storeUtils.CONST.rememberMe)
          }

          this.loading = false;
          let path = '/';
          if (this.redirect) {
            path = this.redirect;
          }
          return this.$router.push({path: path, query: this.query}).catch(err => err);
        }).catch((err: any) => {
          console.error(err);
          this.loading = false;
          this.getCode();
        });
      }
    });
  }

  getCode() {
    getKaptchaImage().then((res: any) => {
      this.codeUrl = res.data.base64Image;
      this.loginForm.key = res.data.key;
    }).catch((err: any) => {
      console.error(err);
    });
  }

  created() {
    this.getRememberMe();
    this.getCode();
  }

  getRememberMe() {
    this.rememberMeUser = storeUtils.getStorageL(storeUtils.CONST.rememberMe);
    if (this.rememberMeUser) {
      this.loginForm.userName = this.rememberMeUser.userName
      this.loginForm.password = this.REMEMBER_ME_USER_PASSWORD;
      this.loginForm.rememberMe = true
    }
  }

  @Watch('$route', {immediate: true})
  onRouteChanged(route: any) {
    this.redirect = route.query && route.query.redirect;
    this.query = route.query;
    if (this.query) {
      delete this.query.redirect;
    }
  }

}
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/image/logo.bg-1.jpg");
  background-size: cover;
}

.title {
  margin: 0 auto 30px auto;
  text-align: center;
  color: #ffffff;
  font-size: 26px;
}
.login-center{
  width: 900px;
  height: 480px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  border-radius: 18px;
  backdrop-filter: blur(7px);
  background-color: rgba(245, 247, 248, 0.1);
  box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px;
  border: 2px rgba(255,255,255,0.4) solid;
  border-bottom: 2px rgba(40,40,40,0.35) solid;
  border-right: 2px rgba(40,40,40,0.35) solid;
  padding: 20px;
  .login-center-left{
    border-radius: 18px;
    height: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    img{
      height: 100%;
    }
  }
}
.login-form {
  //border-radius: 6px;
  //background: #ffffff;
  width: 450px;
  padding: 0 10px 0 10px;
  .el-input {
    height: 38px;

    input {
      height: 38px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  height: 38px;
  float: right;

  img {
    height: 100%;
    width: 100%;
    cursor: pointer;
  }
}

.el-login-footer {
  height: 80px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial, serif;
  font-size: 12px;
  letter-spacing: 1px;
  user-select: none;

  .beian {
    display: flex;
    justify-content: center;

    a {
      color: #ffffff;
      line-height: 25px;
    }

    div {
      margin-left: 5px;
      display: flex;
      align-items: center;

      img {
        width: 18px;
        vertical-align: top;
        margin-right: 5px;
      }
    }
  }
}
</style>
